<template>
	<Teleport to="body" :disabled="!isTeleport">
		<div v-if="modelValue" class="modal">
			<div class="mask" :style="style" @click="maskClose && !loading && handleCancel()"></div>
			<div class="modal__main">
				<div class="modal__title line line--b">
					<span>{{ title || t("r.title") }}</span>
					<span v-if="close" :title="t('r.close')" class="close" @click="!loading && handleCancel()">✕</span>
				</div>
				<!-- 主体内容：传入的content不同，显示不同的内容 -->
				<div class="modal__content">
					<Content v-if="typeof content === 'function'" :render="content" />
					<slot v-else>
						{{ content }}
					</slot>
				</div>
				<div class="modal__btns line line--t">
					<button :disabled="loading" @click="handleConfirm">
						<span class="loading" v-if="loading"> ❍ </span>{{ t("r.confirm") }}
					</button>
					<button @click="!loading && handleCancel()">
						{{ t("r.cancel") }}
					</button>
				</div>
			</div>
		</div>
	</Teleport>
</template>

<script setup>
	import {
		onBeforeMount,
		getCurrentInstance
	} from "vue";
	let instance = getCurrentInstance(); // 获得当前组件实例
	// let ctx = useContext();
	onBeforeMount(() => {
		instance._hub = {
			"on-cancel": () => {},
			"on-confirm": () => {},
		};
	});

	// 使用传统emit的形式使父组件监听，并且通过_hub属性中添加 on-cancel，on-confirm方法实现在API中进行监听
	// 确定
	const handleConfirm = () => {
		context.emit("on-confirm");
		instance._hub["on-confirm"]();
	};
	// 取消
	const handleCancel = () => {
		context.emit("on-cancel");
		context.emit("update:modelValue", false);
		instance._hub["on-cancel"]();
	};
</script>

<style>
</style>
